<template>
  <el-drawer
      :title="title"
      :visible.sync="dialogVisible"
      :size="700"
      @close="close"
    >
    <div class="box-card">
      <el-form ref="elForm" :rules="rules" :model="talentsInfo" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="talentsInfo.title" />
        </el-form-item>

        <el-form-item label="电话" prop="mobile">
          <el-input v-model="talentsInfo.mobile" />
        </el-form-item>

        <el-form-item label="技能要求" prop="skillRequirement">
          <editor v-model="talentsInfo.skillRequirement" :init="editorInit" />
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <el-button @click="close" size="medium">取消</el-button>
      <el-button type="primary" @click="handelConfirm" size="medium">确定</el-button>
    </div>
  </el-drawer>
</template>
<script>
import Editor from '@tinymce/tinymce-vue'
import { saveRcxq } from '@/api/rcxq'
import { uploadImg } from '@/api/files'
export default {
  name: 'NewsArticle',
  components: {
    Editor
  },
  data () {
    return {
      dialogVisible: false,
      title: '新增人才需求',
      talentsInfo: {
        title: '', // 标题
        mobile: '', // 电话
        skillRequirement: '' // 人才技能
      },
      isEdit: false,
      rules: {
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        mobile: [
          {
            required: true,
            message: '请输入电话',
            trigger: 'blur'
          },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '电话格式不正确', trigger: 'blur' }
        ]
      },
      editorInit: {
        language: 'zh_CN',
        height: 500,
        convert_urls: false,
        plugins: ['advlist anchor autolink code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount'],
        toolbar: ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime media table emoticons forecolor backcolor fullscreen'],
        images_upload_handler: async function (blobInfo, success, failure) {
          const formData = new FormData()
          formData.append('file', blobInfo.blob())
          const { url } = await uploadImg(formData, { fileSize: blobInfo.blob().size })
          success(process.env.VUE_APP_BASE_API + '/file/resource/' + url)
        }
      },
      id: null
    }
  },
  mounted () {},
  methods: {
    async isShow (data, isEdit = false) {
      this.dialogVisible = true
      isEdit ? (this.title = '编辑人才需求') : (this.title = '新增人才需求')
      this.isEdit = isEdit
      await this.$nextTick()
      if (isEdit) {
        const formData = this.talentsInfo
        for (const key in formData) {
          formData[key] = data[key]
        }
        this.id = data.id
      }
    },
    close () {
      this.talentsInfo.picUrl = ''
      this.$refs.elForm.resetFields()
      this.dialogVisible = false
    },
    handelConfirm () {
      this.$refs.elForm.validate(async valid => {
        if (!valid) return
        this.isEdit ? (await saveRcxq({ ...this.talentsInfo, id: this.id }))
          : (await saveRcxq(this.talentsInfo))
        this.$notify.success({
          title: `完成${this.title}`
        })
        this.$emit('update:visible')
        this.close()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .box-card {
    margin-bottom: 10px;
    padding-right: 20px;
    width: 100%;
    padding-right: 20px;
  }
.footer {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40px;
  padding-left: 80px;
  padding-right: 20px;
  .el-button {
    width: 100%;
  }
}
</style>
